<template>
    <div class="login-container">
        <div class="login-content">
            <div class="login-card">
                <div class="login-header">
                    <h1>省管理系统</h1>
                    <p>欢迎回来，请登陆您的账户</p>
                </div>

                <form @submit.prevent="handleLogin" class="login-form">
                    <!-- 账号输入框 -->
                    <div class="form-group">
                        <label for="username">账号</label>
                        <el-input
                            id="username"
                            v-model="formData.account"
                            @keyup.enter="handleLogin"
                            placeholder="请输入账号"
                            :prefix-icon="User"
                            size="large"
                            :disabled="isLoading"
                            class="custom-input"
                        />
                    </div>

                    <!-- 密码输入框 -->
                    <div class="form-group">
                        <label for="password">密码</label>
                        <el-input
                            id="password"
                            v-model="formData.password"
                            @keyup.enter="handleLogin"
                            type="password"
                            placeholder="请输入密码"
                            :prefix-icon="Lock"
                            size="large"
                            :disabled="isLoading"
                            show-password
                            class="custom-input"
                        />
                    </div>

                    <!-- 错误提示 -->
                    <div v-if="errorMessage" class="error-message">
                        <el-icon><Warning /></el-icon>
                        {{ errorMessage }}
                    </div>

                    <!-- 登陆按钮 -->
                    <el-button
                        type="primary"
                        class="login-button btn-primary-theme"
                        :loading="isLoading"
                        size="large"
                        native-type="submit"
                        @click="handleLogin"
                    >
                        {{ isLoading ? '登陆中...' : '登 陆' }}
                    </el-button>
                </form>

                <!-- 成功提示 -->
                <div v-if="successMessage" class="success-message">
                    <el-icon><CircleCheck /></el-icon>
                    {{ successMessage }}
                </div>
            </div>

            <div class="login-footer">© 2025 云南省数据采集平台</div>
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref } from 'vue';
import { useRouter } from 'vue-router';
import { User, Lock, Warning, CircleCheck } from '@element-plus/icons-vue';

const router = useRouter();
const { proxy } = getCurrentInstance();

// 表单数据
const formData = ref({
    account: '',
    password: '',
});

// 状态管理
const isLoading = ref(false);
const errorMessage = ref('');
const successMessage = ref('');

// 登陆处理函数
const handleLogin = async () => {
    // 清除之前的消息
    errorMessage.value = '';
    successMessage.value = '';

    // 验证表单
    if (!formData.value.account || !formData.value.password) {
        errorMessage.value = '请输入账号和密码';
        return;
    }

    isLoading.value = true;

    try {
        // 调用登陆接口
        const response = await proxy.$request.post({
            url: '/account/login',
            params: {
                username: formData.value.account,
                password: formData.value.password,
            },
        });

        if (response.code === 200 && response.data) {
            const token = response.data;

            // 保存 token 到 localStorage（实际项目中会自动保存到 Cookie）
            localStorage.setItem('token', token);
            // 记录省级管理员账号，用于后续自动填写发布人
            localStorage.setItem('provincePublisher', formData.value.account);

            successMessage.value = `登陆成功！欢迎回来`;

            // 模拟跳转到首页
            setTimeout(() => {
                router.push('/home');
            }, 1000);
        } else {
            errorMessage.value = response.info || '登陆失败，请检查账号和密码';
        }
    } catch (error) {
        errorMessage.value = error.message || '网络错误，请稍后重试';
        console.error('登陆错误:', error);
    } finally {
        isLoading.value = false;
    }
};
</script>

<style scoped lang="scss">
// 字体与背景配置
$font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
$bg-color: #f8fafc;
$primary-gradient-start: #4f46e5;
$primary-gradient-end: #818cf8;
$text-main: #1e293b;
$text-secondary: #64748b;

.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #f0f4ff 0%, #d9e2ff 100%);
    font-family: $font-family;
}

.login-content {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.login-card {
    background: #ffffff;
    border-radius: 24px;
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    padding: 48px 40px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.login-header {
    text-align: center;
    margin-bottom: 40px;

    h1 {
        font-size: 24px;
        color: $text-main;
        margin: 0 0 12px 0;
        font-weight: 800;
        letter-spacing: -0.025em;
    }

    p {
        font-size: 14px;
        color: $text-secondary;
        margin: 0;
    }
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;

    label {
        font-size: 14px;
        color: $text-main;
        font-weight: 600;
    }
}

.custom-input :deep(.el-input__wrapper) {
    height: 48px;
    border-radius: 14px;
    box-shadow: none;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;

    &:hover {
        border-color: $primary-gradient-start;
        box-shadow: 0 6px 20px rgba(79, 70, 229, 0.08);
    }

    &.is-focus {
        border-color: $primary-gradient-start;
        box-shadow:
            0 8px 30px rgba(79, 70, 229, 0.12),
            0 0 0 4px rgba(79, 70, 229, 0.1);
    }
}

.login-button {
    height: 50px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.01em;
    box-shadow: 0 18px 30px -10px rgba(79, 70, 229, 0.4);
    width: 100%;
}

.btn-primary-theme {
    background: linear-gradient(120deg, $primary-gradient-start, $primary-gradient-end);
    border: none;

    &:hover {
        filter: brightness(1.03);
    }
}

.error-message,
.success-message {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 12px;
}

.error-message {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecdd3;
}

.success-message {
    background: #ecfdf3;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.login-footer {
    margin-top: 20px;
    font-size: 12px;
    color: $text-secondary;
}

@media (max-width: 480px) {
    .login-card {
        padding: 32px 24px;
    }
}
</style>
